<template>
  <div>
    <div style="display: flex; justify-content: center">
      <div class="main"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
onMounted(() => {
  moveNode()
})
function moveNode() {
  const child = document.querySelector('.main')
  let isDragging = false
  let prevX = 0
  let prevY = 0
  child.addEventListener('mousedown', function (e) {
    isDragging = true
    prevX = e.clientX
    prevY = e.clientY
  })
  child.addEventListener('mouseup', function () {
    isDragging = false
  })
  child.addEventListener('mousemove', function (e) {
    if (isDragging) {
      const diffX = e.clientX - prevX
      const left = parseInt(window.getComputedStyle(child).left) || 0
      child.style.left = `${left + diffX}px`
      prevX = e.clientX
      const diffY = e.clientY - prevY
      const top = parseInt(window.getComputedStyle(child).top) || 0
      child.style.top = `${top + diffY}px`
      prevY = e.clientY
    }
  })
}
</script>
<style lang="less" scoped>
.main {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 500px;
  width: 500px;
  background-color: red;
  cursor: move;
}
</style>
